<template>
	<view class="add">
		<view class="zai-box">
		<image src="http://119.29.2.163:9000/xiaomayi/img/touxiang/xiaomayi.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-form">
			<input class="zai-input" maxlength="11" v-model="username" placeholder="请输入手机号" />
			<input class="zai-input" v-model="password" password placeholder="请输入密码" />
			<input class="zai-input" v-model="confirmpassword" password placeholder="请再输入一次密码" />
			<button class="zai-btn" @click="register()">立即注册</button>
			<view class="zai-label"><text @click="toLogin()">已有账号，点此去登录.</text></view>
		</view>
		</view>
	</view>
</template>

<script>
	// import setting from '../../common/setting.js'
	export default {
		data() {
			return {
				username: '',
				password: '',
				confirmpassword: ''
			}
		},
		methods: {
			register() {
				var re = /^[0-9]*$/
				if ((this.username.length != 11) || (!re.test(this.username))) {
					uni.showToast({
						icon: 'none',
						title: '请正确输入11位手机号'
					});
					return;
				} else if (this.password.length < 4) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 4 个字符'
					});
					return;
				} else if (this.password != this.confirmpassword) {
					uni.showToast({
						icon: 'none',
						title: '两次密码输入不一致'
					});
				} else {
					uni.request({
						method: 'post',
						url: 'http://localhost:80/zhuce',
						data: {
							account: this.username,
							password: this.password,
						},
						success(res) {
							console.log(res.data)
							if (res.data == -1) {
								uni.showToast({
									icon: 'none',
									title: '此账号已被注册，请更换手机号'
								});
							} else {
								uni.showToast({
									icon: 'none',
									title: '账号注册成功！'
								})
								setTimeout(()=>{
									uni.reLaunch({
										url: '/pages/6_Login1Page/Login'
									})
								},1500);
								
							}

						}

					})
				}
			},
			toLogin() {
				uni.reLaunch({
					url: '/pages/6_Login1Page/Login'
				})
			}
		}
	}
</script>

<style>
	.add{
		background: linear-gradient(200deg, #ecf5ff, #fdf6ec);
		width: 100vw;
		height: 100vh;
	}
	.zai-box{
			padding: 0 100upx;
			position: relative;
		}
		.zai-logo{
			margin-top: 100upx;
			width: 100%;
			width: 100%;
			height: 100px;
		}
		.zai-title{
			position: absolute;
			top: 0;
			line-height: 360upx;
			font-size: 68upx;
			color: #fff;
			text-align: center;
			width: 100%;
			margin-left: -100upx;
		}
		.zai-form{
			margin-top: 200upx;
		}
		.zai-input{
			background: #e2f5fc;
			margin-top: 30upx;
			border-radius: 100upx;
			padding: 20upx 40upx;
			font-size: 36upx;
		}
		.input-placeholder, .zai-input{
			color: #94afce;
		}
		.zai-label{
			padding: 60upx 0;
			text-align: center;
			font-size: 30upx;
			color: #a7b6d0;
		}
		.zai-btn{
			background: #ff65a3;
			color: #fff;
			border: 0;
			border-radius: 100upx;
			font-size: 36upx;
			margin-top: 60upx;
		}
		.zai-btn:after{
			border: 0;
		}
		/*按钮点击效果*/
		.zai-btn.button-hover{
			transform: translate(1upx, 1upx);
		}
</style>